<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>用户权限管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/jqGrid/css/ui.jqgrid-bootstrap.css"/>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/jqGrid/i18n/grid.locale-cn.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#manager').hide();
            $('#rl').hide();
            $('#priv').hide();
            <c:forEach items="${sessionScope.user.roles}" var="r">
            <c:forEach items="${r.privileges}" var="p">
            if ("${p.privilegeName}" == "root") {
                $('#manager').show();
                $('#rl').show();
                $('#priv').show();
            }
            </c:forEach>
            </c:forEach>
        });

        //安全退出
        function safeOut() {
            $.get(
                '${pageContext.request.contextPath}/user/logout',
                function (result) {
                    if (result.status == 200) {
                        window.location.href = '${pageContext.request.contextPath}/jsp/login.jsp';
                    } else {
                        alert(result.message);
                    }
                }
            );
        }

    </script>
    <style>
        .page-header {
            margin-top: -10px;
        }

        th {
            text-align: center;
        }

        .ui-jqgrid tr.jqgrow td {
            white-space: normal !important;
            height: auto;
            vertical-align: text-top;
            padding-top: 2px;
            display: table-cell;
        }
    </style>
</head>
<body>
<!--导航-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="index.jsp">用户权限管理系统</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">欢迎: <font color="aqua" id="session_user_name">${sessionScope.user.name}</font> &nbsp;登录 </a>
                </li>
                <li><a href="#" onclick="safeOut()">退出登录</a></li>
            </ul>
        </div>
    </div>
</nav>
<%--主体--%>
<div class="container-fluid">
    <div class="row">
        <%--下拉列表--%>
        <div class="col-sm-2">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default" style="margin-bottom: 10px">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                用户中心
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div class="list-group">
                                <a href="javascript:$('#content').load('./user/userInfo.jsp')"
                                   class="list-group-item">个人信息</a>
                            </div>
                            <div class="list-group" id="manager">
                                <a href="javascript:$('#content').load('./user/userManager.jsp')"
                                   class="list-group-item">用户管理</a>
                            </div>
                            <div class="list-group" id="rl">
                                <a href="javascript:$('#content').load('./role/roles.jsp')"
                                   class="list-group-item">角色管理</a>
                            </div>
                            <div class="list-group" id="priv">
                                <a href="javascript:$('#content').load('./pivilege/privilege.jsp')"
                                   class="list-group-item">权限管理</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <%--内容--%>
        <input type="hidden" id="userId" value="">
        <div id="content">
            <div class="col-sm-10">
                <%--面板--%>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <p class="h3">欢迎使用用户权限管理系统!</p>
                    </div>
                </div>
                <%--轮播图--%>
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- 指示灯 -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>

                    <!-- 图片 -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img style="height: 695px" src="${pageContext.request.contextPath}/static/img/banner0.jpg">
                            <div class="carousel-caption">
                                0.jpg
                            </div>
                        </div>
                        <div class="item">
                            <img style="height: 695px" src="${pageContext.request.contextPath}/static/img/banner1.jpg">
                            <div class="carousel-caption">
                                1.jpg
                            </div>
                        </div>
                        <div class="item">
                            <img style="height: 695px" src="${pageContext.request.contextPath}/static/img/banner2.jpg">
                            <div class="carousel-caption">
                                2.jpg
                            </div>
                        </div>
                    </div>

                    <!-- 控制 -->
                    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<br><br>
<div class="panel-footer">
    <p class="text-center">@中移在线</p>
</div>
<%--修改个人 - 模态框--%>
<div class="modal fade bs-example-modal-lg" id="userModal" data-toggle="modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">修改个人信息</h4>
            </div>
            <div class="modal-body">
                <form method="post" id="modalForm">
                    <div class="form-group">
                        <label>用户名</label>
                        <input type="hidden" name="id" id="id" value="">
                        <input type="text" class="form-control" name="username" id="uname" value=""
                               placeholder="用户名"/>
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input type="text" class="form-control" name="password" id="password" value=""
                               placeholder="密码"/>
                    </div>
                    <div class="form-group">
                        <label>真实姓名</label>
                        <input type="text" class="form-control" name="name" id="realName" value=""
                               placeholder="用户名"/>
                    </div>
                    <div class="form-group">
                        <label>性别</label>
                        <select class="form-control" name="sex" id="sx">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>年龄</label>
                        <input type="text" class="form-control" name="age" id="ag" value=""
                               placeholder="年龄"/>
                    </div>
                    <div class="form-group">
                        <label for="role" class="control-label">所属角色</label>
                        <div class="control">
                            <select multiple class="form-control" id="role" readonly="readonly">

                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="au" class="control-label">你的权限</label>
                        <div class="control">
                            <select multiple class="form-control" id="au" readonly>

                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer" id="modal_footer">

            </div>
        </div>
    </div>
</div>
<%--角色详情 - 模态框--%>
<div class="modal fade bs-example-modal-lg" id="roleModal" data-toggle="modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title" id="roleModalLabel">角色详情</h4>
            </div>
            <div class="modal-body">
                <form method="post" id="roleModalForm">
                    <div class="form-group">
                        <label class="control-label">角色名</label>
                        <input type="text" class="form-control" name="roleName_modal" id="roleName_modal" value=""
                               placeholder="角色名" readonly="readonly"/>
                    </div>
                    <div class="form-group">
                        <label class="control-label">所有权限</label>
                        <div class="control">
                            <select multiple class="form-control" id="rolePrivilege" readonly>

                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer" id="role_modal_footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<%--权限详情 - 模态框--%>
<div class="modal fade bs-example-modal-lg" id="privilegeModal" data-toggle="modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title" id="privilegeModalLabel">权限详情</h4>
            </div>
            <div class="modal-body">
                <form method="post" id="privilegeModalForm">
                    <div class="form-group">
                            <label class="control-label">权限名</label>
                        <input type="text" class="form-control" name="privilegeName_modal" id="privilegeName_modal" value=""
                               readonly="readonly"/>
                    </div>
                    <div class="form-group">
                        <label class="control-label">链接地址</label>
                        <input type="text" class="form-control" name="privilegeLocation_modal" id="privilegeLocation_modal" value=""
                               readonly="readonly"/>
                    </div>
                </form>
            </div>
            <div class="modal-footer" id="privilege_modal_footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
